{% extends "base.html" %}

{% block title %}Web Application{% endblock %}

{% block body %}
<div class="wrapper d-flex">
    <!-- 侧边栏 -->
    <nav class="sidebar bg-white" id="sidebar">
        <div class="sidebar-header p-3">
            <div class="d-flex align-items-center justify-content-between">
                <a href="/" class="d-flex align-items-center text-decoration-none">
                    <img src="{{ url_for('static', path='/fastapi-logo.svg') }}" alt="Logo" height="35">
                </a>
                <button class="btn btn-link sidebar-close d-lg-none">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
        </div>
        
        <div class="sidebar-content p-3">
            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <a class="nav-link {% if request.url.path == '/api' %}active{% endif %}" href="/api">
                        <i class="bi bi-house-door me-2"></i>
                        <span>首页</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="main-content flex-grow-1 d-flex flex-column">
        <!-- 顶部导航栏 -->
        <header class="header navbar navbar-expand-lg navbar-dark">
            <div class="container-fluid px-3">

                
                <div class="navbar-nav ms-auto">
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle fs-5 me-2"></i>
                            <span>管理员</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="/docs" target="_blank">
                                <i class="bi bi-file-earmark-text me-2"></i>接口文档
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>

        <!-- 面包屑 -->
        <nav aria-label="breadcrumb" class="breadcrumb-nav px-3 py-2 border-bottom">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/"><i class="bi bi-house-door me-1"></i>首页</a>
                </li>
                <li class="breadcrumb-item active">{% block breadcrumb %}{% endblock %}</li>
            </ol>
        </nav>

        <!-- 主要内容区域 -->
        <div class="content flex-grow-1 overflow-auto p-3">
            {% block content %}{% endblock %}
        </div>

        <!-- 页脚 -->
        <footer class="footer py-3">
            <div class="container-fluid text-center">
                <span>© 2023 FastAPI Admin. All rights reserved.</span>
            </div>
        </footer>
    </div>
</div>

<style>
:root {
    --fastapi-primary: #00897b;
    --fastapi-hover: #00796b;
    --fastapi-light: rgba(0, 137, 123, 0.1);
    --sidebar-width: 250px;
    --header-height: 50px;
    --footer-height: 50px;
}

/* 布局样式 */
.wrapper {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa;
}

/* 侧边栏样式 */
.sidebar {
    background: white;
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
}

.sidebar-header {
    height: var(--header-height);
    background: white;
}

.sidebar-content .nav-link {
    color: #424242;
    border-radius: 6px;
    padding: 12px 15px;
    margin: 5px 0;
    transition: all 0.2s ease;
}

.sidebar-content .nav-link:hover,
.sidebar-content .nav-link.active {
    color: var(--fastapi-primary);
    background-color: var(--fastapi-light);
}

/* 主内容区样式 */
.main-content {
    margin-left: var(--sidebar-width);
    height: 100vh;
    overflow: hidden;
    background: white;
}

.header {
    height: var(--header-height);
    background: var(--fastapi-primary);
    flex-shrink: 0;
    color: white;
}

.header .btn-link,
.header .nav-link {
    color: white 
}

.breadcrumb-nav {
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.breadcrumb-nav a {
    color: var(--fastapi-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.breadcrumb-nav a:hover {
    color: white;
    background-color: var(--fastapi-primary);
}

.content {
    background-color: transparent;
}
.footer {    
    height: var(--footer-height);    
    background: var(--fastapi-primary);
    border-top: 1px solid #eee;
    color: #ffffff;
}


.dropdown-item:hover {
    background-color: var(--fastapi-light);
    color: var(--fastapi-primary);
}

.dropdown-menu {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
}


</style>

{% endblock %}